<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :title="title"
    width="1200px"
    top="5vh"
  >
    <MainContainer class="p-2 h-[55vh]">
      <MyQuery
        v-model:params="params"
        :options="queryOptions"
        @query="handleQuery"
        @reset="handleReset"
      ></MyQuery>
      <MyTable
        v-loading="loading"
        max-height="42vh"
        class="my-2"
        :data="list"
        :columns="columns"
        :is-show-selection="true"
        @confirm="handleConfirm"
      ></MyTable>
    </MainContainer>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <template #footer>
      <div class="flex">
        <el-button size="large" class="flex-1" @click="handleClose">
          取消
        </el-button>
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          class="flex-1"
          @click="handleBindingCompany"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD";
import MyQuery from "@/components/MyQuery.vue";
import MainContainer from "@/components/MainContainer.vue";
import MyTable from "@/components/MyTable.vue";
import parseTime from "@/utils/parseTime.js";
import { toRefs } from "vue";
import { fetchList, bindingCompany } from "@/api/login.js";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  options: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  companyId: {
    type: Number,
    default: 0,
  },
});

let adminIds;

const { visible, companyId } = toRefs(props);

const emit = defineEmits(["update:visible", "confirm"]);

function handleClose() {
  emit("update:visible", false);
  handleQuery();
}

// 分配用户

function handleConfirm(val) {
  if (val.length === 1) {
    adminIds = String(val[0].id);
  } else {
    adminIds = "";
    val.forEach((element) => {
      adminIds += String(element.id) + ",";
    });
    adminIds = adminIds.slice(0, adminIds.length - 1);
  }
}

async function handleBindingCompany() {
  loading.value = true;
  try {
    await bindingCompany(companyId.value, adminIds);
    emit("update:visible", false);
    loading.value = false;
  } catch {
    loading.value = false;
  }
}

const queryOptions = [
  {
    prop: "nickName",
    placeholder: "用户名称",
  },
];

const columns = [
  {
    prop: "id",
    label: "编号",
  },
  {
    prop: "username",
    label: "账号",
  },
  {
    prop: "nickName",
    label: "姓名",
  },
  {
    prop: "email",
    label: "邮箱",
  },
  {
    prop: "createTime",
    label: "添加时间",
    formatter(row) {
      const date = new Date(row.createTime);
      return parseTime(date);
    },
  },
  {
    prop: "loginTime",
    label: "最后登录",
    formatter(row) {
      const date = new Date(row.loginTime);
      return parseTime(date);
    },
  },
];

const crudOptions = {
  queryApi: fetchList,
};
const { params, handleQuery, list, loading, handleReset, total } =
  useCRUD(crudOptions);

handleQuery();
</script>
